import { View, Text } from "@tarojs/components"
import XLoadMore from '../../../../components/XLoadMore'
import { useRef, useState } from "react"

import Taro, {
    usePullDownRefresh
} from '@tarojs/taro'

import './index.scss'
import { rechargeLogApi } from "../../../../services/Recharge"
import { parseTime } from "../../../../utils"

interface Log {
    orderNo : string;
    tradeNo :string;
    createTime : string | number;
    amount : string | number;
    rewardAmount : string | number;
    [key:string] : any;
}

export default() => {
    let loadMoreRef = useRef(null)
    let [logList, setLogList] = useState<Log[]>([])

    function loadRechargeLog(rows:any[]) {
        if(rows && rows.length > 0) {
            logList.push(...rows)
            setLogList([...logList])
        }
        
    }




    // usePullDownRefresh(() => {
    //     Taro.startPullDownRefresh({
    //         success() {
    //             loadMoreRef.current.reLoad()
    //         }
    //     })
    //     setTimeout(() => {
    //         Taro.stopPullDownRefresh()
    //     }, 3000)
    // })

    

    return (
        <View className='page'>
            <View className='p-l-r'>
                {
                    logList.map(log => <View className='log-item'>
                        <View>订单号：<Text user-select>{log.orderNo}</Text></View>
                        <View>交易号：<Text user-select>{log.tradeNo}</Text></View>
                        <View className='m-t-10'>{parseTime(log.createTime)}</View>
                        <View className='m-t-10'>充值<Text className='color-bd1c1c'> {log.amount} </Text>元{log.rewardAmount > 0 && <>，赠送<Text className='color-bd1c1c'> {log.rewardAmount} </Text>元</> }</View>
                    </View>)
                }
            </View>
            <View className='p-l-r'>
                <XLoadMore ref={loadMoreRef} keyName='orderId' onClick={rechargeLogApi} onFinish={rows => loadRechargeLog(rows)}></XLoadMore>
            </View>
        </View>
    )
}